{% extends 'layout.html' %}

{% block title %}{{ bucketName }}{% endblock %}


{% block breadcrumb %}
<li class="nav-item">
  <a class="nav-link px-1" href="{{ dbUrl }}">Database:</a>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle px-1" href="#" role="button" aria-controls="navbarDatabaseDropdown" data-bs-target="#navbarDatabaseDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    {{ dbName }}
  </a>
  <ul id="navbarDatabaseDropdown" class="dropdown-menu">
    {% for db in databases %}
    <li><a class="dropdown-item" href="{{ baseHref }}db/{{ db | url_encode }}/">{{ db }}</a></li>
    {% endfor %}
  </ul>
</li>
<li class="nav-item">
  <a class="nav-link px-1" href="{{ dbUrl }}/{{ bucketName }}">Bucket:</a>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle px-1" href="#" role="button" aria-controls="navbarBucketDropdown" data-bs-target="#navbarBucketDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    {{ bucketName }}
  </a>
  <ul id="navbarBucketDropdown" class="dropdown-menu">
    {% for bucket in buckets %}
    <li><a class="dropdown-item" href="{{ dbUrl }}/gridFS/{{ bucket }}">{{ bucket }}</a></li>
    {% endfor %}
  </ul>
</li>
{% endblock %}

{% block content %}
{% if files.length == 0 %}
<div class="alert alert-info" role="alert">
  No files found.
</div>
{% else %}

<div class="table-responsive tableWrapper">
  <table class="table table-striped">
    <thead>
      {% for column in columns %}
      <th>{{ column }}</th>
      {% endfor %}
      <th>Delete</th>
    </thead>
    {% for file in files %}
    <tr onclick="loadFile('{{ file._id | json | safe | url_encode }}')">
      {% for column in columns %}
      <td>
        <div class="tableContent">{{ file[column] | to_display | safe }}</div>
      </td>
      {% endfor %}
      {% if !settings.read_only && !settings.no_delete %}
      <td>
        <div class="col-md-1">
          <form method="POST" action="{{ dbUrl }}/gridFS/{{ bucketName }}/{{ file._id | json | safe | url_encode }}">
            <input type="hidden" name="_csrf" value="{{ csrfToken }}">
            <input type="hidden" name="_method" value="delete">
            <button type="submit" class="btn btn-danger">
              <i class="fa fa-trash"></i>
            </button>
          </form>
        </div>
      </td>
      {% endif %}
    </tr>
    {% endfor %}
  </table>
</div>

{% endif %}

{% if !settings.read_only %}
<!--
  <div class="row">
      <div class="col-md-12">
        <h2>Rename Bucket</h2>
        <form method="POST" action="{{ dbUrl }}/{{ bucketName }}" class="well form-inline">
          <input type="hidden" name="_csrf" value="{{ csrfToken }}">
          <input type="hidden" name="_method" value="put">
          <div class="form-group">
            <input class="input-medium span7" type="text" id="bucket" name="bucket" placeholder="{{ bucketName }}">
          </div>
          <button type="submit" class="btn btn-primary float-end">
            <span class="glyphicon glyphicon-pencil"></span>
            Rename
          </button>
        </form>
      </div>
  </div>
 -->
<div class="row">
  <div class="col-md-12">
    <h2>Add File</h2>
    <form method="POST" action="{{ dbUrl }}/gridFS/{{ bucketName }}/" enctype="multipart/form-data"
      class="form-inline">
      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
      <div class="form-group">
        <input type="file" class="form-control-file" name="filefield">
      </div>

      <button type="submit" class="btn btn-success float-end">
        <i class="fa fa-upload"></i>
        Upload
      </button>
    </form>
  </div>
</div>
{% endif %}


{% endblock %}
{% block scripts %}
<script src="{{ baseHref }}{{ assets.gridfs.js }}"></script>
{% endblock %}